<template>
  <div>
  </div>
</template>

<script>
import {createApp} from 'vue';
import CodeCopy from './copy.vue';

import Bus from '../bus/bus.js';
export default {
  mounted () {
    this.$copyUpdates();

    //订阅消息  跳页面后  重新渲染复制按钮
    var that = this
    Bus.$on('codeCopyToPage',()=>{
      console.log("收到消息  codeCopyToPage 重新渲染页面代码块复制按钮")
      that.$copyUpdates();
    })
  },

  methods: {
    $copyUpdates() {

      // 获取所有的dom，之后在所有的代码块上插入vue的组件
      const dom = Array.from(document.querySelectorAll('div[class*="language-"] pre'));
      // console.log(dom)
      dom.forEach((e) => {
        const el = e;
        // const el = e.parentElement;
        // 判断一下，当前节点是不是已经插入了
        if (/v-copy/.test(el.className)) {
          return;
        }



        // 创建copy组件
        const C = createApp(CodeCopy);

        // 提供一个要覆盖的元素
        const content = document.createElement('div')
        //mount方法不再像vue2一样支持未挂载的实例，必须得挂载，即必须得给参数
        const copy = C.mount(content)

        // console.log(copy)
        // console.log(el)
        // console.log(el.textContent)
        //设置复制内容
        copy.set_code(el.textContent)

        el.className += ' v-copy';
        el.parentElement.appendChild(copy.$el);
        // console.log("父" + el.parentElement)
        // console.log(copy)
        // console.log(copy.$el)
      });
    },
  },
};

</script>

<style scoped>

</style>
